<page-header title="标签详情" [breadcrumb]="breadcrumb" [action]="action" [back]="true">
  <ng-template #breadcrumb>
    <ql-breadcrumb separator="/">
      <ql-breadcrumb-item>客户管理</ql-breadcrumb-item>
      <ql-breadcrumb-item>客户标签</ql-breadcrumb-item>
      <ql-breadcrumb-item>标签详情</ql-breadcrumb-item>
    </ql-breadcrumb>
  </ng-template>
  <ng-template #action> </ng-template>
</page-header>

<page-container>
  <ql-button-group>
    <ql-button [type]="content === tagInfo ? 'primary' : ''" (click)="onChangeTab(tagInfo)">标签信息</ql-button>
    <ql-button [type]="content === tagRecord ? 'primary' : ''" (click)="onChangeTab(tagRecord)">执行记录</ql-button>
    <ql-button [type]="content === tagUser ? 'primary' : ''" (click)="onChangeTab(tagUser)">人员列表</ql-button>
    <ql-button [type]="content === tagView ? 'primary' : ''" (click)="onChangeTab(tagView)">基本特征</ql-button>
    <ql-button [type]="content === tagFeature ? 'primary' : ''" (click)="onChangeTab(tagFeature)">产品偏好</ql-button>
  </ql-button-group>
  <div class="ql-padding-y">
    <ng-container [ngTemplateOutlet]="content"></ng-container>
  </div>
  <ng-template #tagUser>
    <data-table [model]="userList" [cursor]="cursorService" (cursor-change)="getTagCustomer(id)">
      <ql-table-column model-key="customername" label="姓名"> </ql-table-column>
      <ql-table-column model-key="sex" label="性别">
        <ng-template #slot let-scope="scope">
          {{scope.rowData.sex | dict:'sex'}}
        </ng-template>
      </ql-table-column>
      <ql-table-column model-key="age" label="年龄"> </ql-table-column>
      <ql-table-column model-key="customertype" label="客户类型">
        <ng-template #slot let-scope="scope">
          {{scope.rowData.customertype | dict:'customer_type'}}
        </ng-template>
      </ql-table-column>
      <ql-table-column model-key="customerlevel" label="客户等级">
        <ng-template #slot let-scope="scope">
          {{scope.rowData.customerlevel | dict:'customer_level'}}
        </ng-template>
      </ql-table-column>
      <ql-table-column model-key="assetbal" label="总资产余额"> </ql-table-column>
    </data-table>
  </ng-template>

  <ng-template #tagView>
    <div ql-row gutter="24">

      <ql-card  ql-col span="24">
      <div echarts [options]="option[0]" [merge]="option[1]" ></div>
      </ql-card>
      <!--<ql-card header="年龄分布" ql-col span="12">-->
        <!--<div echarts [options]="ageOption"></div>-->
      <!--</ql-card>-->
      <!--<ql-card header="资产分布" ql-col span="12">-->
        <!--<div echarts [options]="assetOption"></div>-->
      <!--</ql-card>-->
      <!--<ql-card header="等级分布" ql-col span="12">-->
        <!--<div echarts [options]="levelOption"></div>-->
      <!--</ql-card>-->
      <!--<ql-card header="风险分布" ql-col span="12">-->
        <!--<div echarts [options]="riskOption"></div>-->
      <!--</ql-card>-->
    </div>
  </ng-template>
  <ng-template #tagFeature>
    <label-container labelWidth="150" col="2">
      <label-item label="理财产品持有率">
        {{preference.financialhold }}
      </label-item>
      <label-item label="持有总金额" unit="元">{{preference.financialhold }}</label-item>
      <label-item label="信用卡产品持有率">
        {{preference.cardhold }}
      </label-item>
      <!--<label-item label="持有总金额" unit="元">{{preference.holdtotal }}</label-item>-->
      <label-item label="活期总额" unit="元">{{preference.activetotal  }}</label-item>
      <label-item label="活期户均" unit="元">{{preference.activeaverage  }}</label-item>
      <label-item label="定期总额" unit="元">{{preference.fixedtotal  }}</label-item>
      <label-item label="定期户均" unit="元">{{preference.fixedaverage  }}</label-item>
      <label-item label="贷款总额" unit="元">{{preference.loantotal  }}</label-item>
      <label-item label="贷款户均" unit="元">{{preference.loanaverage  }}</label-item>
    </label-container>
  </ng-template>
  <ng-template #tagInfo>
    <label-container labelWidth="150" col="2">
      <label-item label="标签ID">{{ tag.tagcode }}</label-item>
      <label-item label="标签名称">{{ tag.tagname }}</label-item>
      <label-item label="一级标签">基础信息</label-item>
      <label-item label="更新方式">自动 - 每天</label-item>
      <label-item label="备注">无</label-item>
    </label-container>
  </ng-template>
  <ng-template #tagRecord>
    <data-table [model]="recordList" [cursor]="cursorService" (cursor-change)="getTagExecute(id)">
      <ql-table-column model-key="runtime" label="运行时间"> </ql-table-column>
      <ql-table-column model-key="runway" label="运行方式"> </ql-table-column>
      <ql-table-column model-key="runperiod" label="运行周期"> </ql-table-column>
      <ql-table-column model-key="runstatus" label="运行状态"> </ql-table-column>
      <ql-table-column model-key="runresult" label="运行结果"> </ql-table-column>
    </data-table>
  </ng-template>
</page-container>
